<template>
  <div class="project-detail-container">
    <div class="nav-box">
      <van-tabs v-model="activeName">
        <van-tab
          title="设备列表"
          name="设备列表"
          v-if="$checkBtnPermission('projectCenter:projectView:projectManage:list:detail:deviceList')"
        >
          <EquipmentList :projectId="projectId"></EquipmentList>
        </van-tab>
        <van-tab
          title="基本信息"
          name="基本信息"
          v-if="$checkBtnPermission('projectCenter:projectView:projectManage:list:detail:basicInfo')"
        >
          <BasicInfo :projectId="projectId"></BasicInfo>
        </van-tab>
        <van-tab
          title="维修记录"
          name="维修记录"
          v-if="$checkBtnPermission('projectCenter:projectView:projectManage:list:detail:repairRecord')"
        >
          <MaintenanceRecord :projectId="projectId"></MaintenanceRecord>
        </van-tab>
        <van-tab
          title="报警通知"
          name="报警通知"
          v-if="$checkBtnPermission('projectCenter:projectView:projectManage:list:detail:alarmNotice')"
        >
          <WarningNotice :projectId="projectId"></WarningNotice>
        </van-tab>
        <van-tab
          title="项目文档"
          name="项目文档"
          v-if="$checkBtnPermission('projectCenter:projectView:projectManage:list:detail:document')"
        >
          <ProjectDocumentation :projectId="projectId"></ProjectDocumentation>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>  

<script>
import { Tab, Tabs } from 'vant';
import EquipmentList from './components/EquipmentList.vue';
import BasicInfo from './components/BasicInfo.vue';
import MaintenanceRecord from './components/MaintenanceRecord.vue';
import WarningNotice from './components/WarningNotice.vue';
import ProjectDocumentation from './components/ProjectDocumentation.vue';

export default {
  name: 'ProjectDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    EquipmentList,
    BasicInfo,
    MaintenanceRecord,
    WarningNotice,
    ProjectDocumentation
  },
  data() {
    return {
      projectId: 0, // 项目id
      activeName: '设备列表',
      navData: ['设备列表', '基本信息', '维修记录', '报警通知', '项目文档']
    };
  },
  created() {
    this.projectId = Number(this.$route.query.id);
  }
};
</script>

<style lang="scss" scoped>
.project-detail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: 0.426667rem;

  .nav-box {
    width: 100%;
    height: 100%;

    ::v-deep .van-tabs {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .van-tabs__line {
        background-color: var(--color-primary);
      }

      .van-tabs__wrap {
        flex-shrink: 0;
        border-bottom: 1px solid var(--border-color);
      }

      .van-tabs__content {
        flex: 1;
        height: 0;

        .van-tab__pane {
          height: 100%;
        }
      }
    }
  }
}
</style>